<template>
  <div class="cards-body">
    <el-card class="box-card" :class="{'no-shadow':!shadow}" :style="{'border':borderStyle}">
      <div slot="header" class="clearfix" v-if="showHeader">
        <span class="littleColor"></span>
        <span class="title">
          <slot name="title" v-if="$slots.title" />
          <span v-else v-html="title"></span>
        </span>
        <slot name="rightConten">
          <div style="float: right;" @click="setShowCardBody">
            <div class="body-extend" v-if="extend">
              <span v-if="!isShowCardBody">
                <amsp-icon type="el" class="icon" name="el-icon-arrow-down" />展开
              </span>
              <span v-else>
                <amsp-icon type="el" class="icon" name="el-icon-arrow-up" />收起
              </span>
            </div>
            <slot v-else name="action" />
          </div>
        </slot>
      </div>
      <div class="contentBox" v-show="isShowCardBody">
        <slot name="btns"/>
        <div class="cards-content"><slot /></div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Card',
  data() {
    return {
      isShowCardBody: true
    };
  },
  watch: {
    open() {
      this.isShowCardBody = this.open;
    }
  },
  created() {
    this.isShowCardBody = this.open;
  },
  props: {
    open: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: ""
    },
    showHeader: {
      type: Boolean,
      default: true
    },
    extend: {
      type: Boolean,
      default: false
    },
    shadow: {
      type: Boolean,
      default: true
    },
    borderStyle: {
      type: String,
      default: 'none'
    }
  },
  methods: {
    setShowCardBody() {
      if (!this.extend) {
        return;
      }
      this.isShowCardBody = !this.isShowCardBody;
    }
  }
};
</script>

<style lang="less" scoped>
.body-extend {
  font-size: 16px;
  user-select: none;
  cursor: pointer;
  .icon {
    margin-right: 5px;
  }
}
.cards-body {
  & + {
    margin-bottom: 10px;
  }
  &:last-child {
    margin-bottom: 0;
  }
  .el-card {
    height: 100%;
  }
  .el-dialog__headerbtn{
    top: 10px;
  }
  .el-dialog__headerbtn .el-dialog__close{
    font-size:26px;
  }
  /deep/.el-card__body {
    padding-top: 0;
    padding-right: 0px;
    height: calc(100% - 63px);
    padding-bottom: 8px;
  }
  .contentBox {
    height: 100%;
    position: relative;
  }
  .cards-content {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 20px;
    scrollbar-width: var(--scrollbar-width); 
    scrollbar-color: var(--scrollbar-color) var(--scrollbar-track-color);
    &::-webkit-scrollbar{
      width: 5px;
      border-radius: 2px;
    }
    &::-webkit-scrollbar-track {
      background: #fff;
      width: 5px;
    }
    &::-webkit-scrollbar-thumb {
      background: #b0cfdf;
      border-radius: 2px;
      width: 5px;
    }
    &::-webkit-scrollbar-thumb:hover {
      background: #3087ff;
      width: 5px;
    }
  }
}
.text {
  font-size: 14px;
}
.littleColor {
  width: 4px;
  height: 12px;
  background: #008cd6;
  display: inline-block;
  margin-right: 8px;
  margin-left: -12px;
}
.title {
  font-size: 16px;
}
.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
/deep/ .el-card__header {
  border: none;
}
.box-card {
  border-radius: 10px;
  padding-left: 7px;
  &.no-shadow {
    box-shadow: none;
  }
  &.no-border {
    border: none;
  }
}
</style>
